<template>
    <div>
        <header>
            <van-nav-bar title="设置">
                <template #left>
                    <van-icon name="arrow-left" size="18" @click="handleBack" />
                </template>
            </van-nav-bar>
        </header>
        <section>
            <div>
                <van-cell title="账号ID" :value="userId" clickable />
            </div>
            <div>
                <van-cell title="登录密码" value="修改" clickable>
                    <template #right-icon>
                        <van-icon name="arrow" class="search-icon" :style="myStyle" :color="color" :size="size" />
                    </template>
                </van-cell>
                <van-cell title="安全密码" value="未设置" clickable>
                    <template #right-icon>
                        <van-icon name="arrow" class="search-icon" :style="myStyle" :color="color" :size="size" />
                    </template>
                </van-cell>
            </div>
            <div>
                <van-cell title="手机号码" :value="userMobile" clickable>
                    <template #right-icon>
                        <van-icon name="arrow" class="search-icon" :style="myStyle" :color="color" :size="size" />
                    </template>
                </van-cell>
                <van-cell title="软件版本" is-link>
                    <template #right-icon>
                        <van-icon name="arrow" class="search-icon" :style="myStyle" :color="color" :size="size" />
                    </template>
                </van-cell>
                <van-cell title="隐私政策" clickable>
                    <template #right-icon>
                        <van-icon name="arrow" class="search-icon" :style="myStyle" :color="color" :size="size" />
                    </template>
                </van-cell>
                <van-cell title="用户协议" clickable>
                    <template #right-icon>
                        <van-icon name="arrow" class="search-icon" :style="myStyle" :color="color" :size="size" />
                    </template>
                </van-cell>
                <van-cell title="意见反馈" clickable>
                    <template #right-icon>
                        <van-icon name="arrow" class="search-icon" :style="myStyle" :color="color" :size="size" />
                    </template>
                </van-cell>

            </div>
            <div>
                <van-cell title="清除缓存" value="0.1KB" clickable />

            </div>
            <div>
                <van-cell title="注销账号" clickable>
                    <template #right-icon>
                        <van-icon name="arrow" class="search-icon" :style="myStyle" :color="color" :size="size" />
                    </template>
                </van-cell>
            </div>
            <div>
                <van-cell title="退出账号" clickable @click="userExit" />

            </div>
        </section>


    </div>
</template>

<script setup>
import { Cell as vanCell, CellGroup as vanCellGroup, Icon as vanIcon, NavBar as vanNavBar } from 'vant';
import { ref, onBeforeMount, computed } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()
const color = ref('#E2E3E5')
const size = ref(14)
const myStyle = ref('transform:translate(6px,6px)')
const handleBack = () => {
    router.go(-1)
}
const userInfo = ref({})
const userId = ref('')
const userPhone = ref('')
const userMobile = computed(() => {
    let a = userPhone.value.slice(0, 3)
    let c = userPhone.value
    let e = c.split('').reverse().slice(0, 4).reverse().join('')
    return a + ' **** ' + e
})
const userExit = () => {
    localStorage.removeItem('userInfo')
    router.push('./center')
    location.reload()
}

onBeforeMount(() => {
    userInfo.value = JSON.parse(localStorage.getItem('userInfo'))
    userId.value = userInfo.value.createdAt
    userPhone.value = userInfo.value.mobile
})

</script>

<script>
export default {
    beforeRouteEnter(to, from, next) {
        let isAuthenticated = localStorage.getItem('userInfo')
        if (isAuthenticated) {     
            if (Object.prototype.toString.call(JSON.parse(isAuthenticated)) === '[object Object]') next()  
             else next({ name: "login", }) 
        } else {
            next({ name: "login", })
        }
    }
}
</script>

<style lang="scss" scoped>
html,
body,
#app,
#app>div>div {
    height: 100%;
    background-color: #F4F4F4;
}

header {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 100;
}

section {
    &>div {
        margin: 2.4vw 0px;
    }

    &>div:last-child {
        & :deep(.van-cell__title) {
            text-align: center;
            color: red;
        }
    }
}
</style>